<template>
  <div>
    <div class="table-title">
      <span>{{ tabTitle }}</span>
    </div>

    <div class="table-container">
      <div class="select-box">
        <div class="select-row">
          <span class="text">课程名称</span>
          <el-input v-model="courseName" :size="formSize" class="form-width" placeholder="请输入" />
        </div>
        <div class="select-row">
          <span class="text">教师</span>
          <el-input v-model="teacherName" :size="formSize" class="form-width" placeholder="请输入" />
        </div>
        <div class="select-row">
          <span class="text">时间</span>
          <el-date-picker
            class="form-width"
            v-model="courseTime"
            :size="formSize"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </div>
        <el-button type="primary" size="small" @click="getCourseList">查询</el-button>
      </div>

      <el-table
        :data="courseList"
        border
        stripe
        size="small"
        max-height="630px"
        style="width: 100%; margin-top: 20px;">
        <el-table-column type="index" label="No" :index="indexMethod"></el-table-column>
        <el-table-column prop="subName" label="课程名称"></el-table-column>
        <el-table-column prop="teacherName" label="教师"></el-table-column>
        <el-table-column prop="cidName" label="教室名称"></el-table-column>
        <el-table-column prop="startTime" label="开始时间"></el-table-column>
        <el-table-column prop="endTime" label="结束时间"></el-table-column>
      </el-table>

      <Pagination :pageData="pageData" @pageNum="pageNumData" @pageSize="pageSizeData"></Pagination>
    </div>
  </div>
</template>

<script>
import Pagination from "@/components/pagination/Pagination";
import httpInterface from "../../utils/httpInterface";
import { errorMessage, successMessage } from "../../utils/validate";

export default {
  name: "CourseList",
  components: { Pagination },
  data() {
    return {
      courseList: [],
      pageData: {
        total: 0,
        pageNum: 1,
        pageSize: 20
      },
      formSize: "small",
      courseName: "",
      teacherName: "",
      courseTime: []
    }
  },
  props: {
    tabTitle: String
  },

  computed: {},

  created() {},

  mounted() {
    this.courseName = "";
    this.teacherName = "";
    this.courseTime = [];
  },

  methods: {
    indexMethod(index) {
      return index + 1;
    },

    pageNumData(page) {
      this.pageData.pageNum = Number(page);
      this.getStudentList();
    },

    pageSizeData(page) {
      this.pageData.pageSize = Number(page);
      this.getStudentList();
    },

    addFaceInfo(row) {
      this.$refs.uploadFileModelRef.showDialog(row.id);
    },

    getCourseList() {
      let { pageData, courseName, teacherName, courseTime } = this;
      let params = {
        page: pageData.pageNum,
        size: pageData.pageSize,
      };
      if (courseName) {
        params.courseName = courseName;
      }
      if (teacherName) {
        params.teacherName = teacherName;
      }
      if (courseTime && courseTime.length > 0) {
        params.startTime = courseTime[0] + " 00:00:00";
        params.endTime = courseTime[1] + " 23:59:59";
      }
      httpInterface.requestPost(httpInterface.URL_COURSE_LIST, params, res => {
        let { code, body } = res.data;
        if (code == 200) {
          this.courseList = body.rows;
          this.pageData.total = Number(body.total);
        } else {
          errorMessage("课程表数据加载失败！");
        }
      }, null, true)
    }
  }
}
</script>

<style scoped lang="scss">
.table-title {
  margin-top: -5px;
}

.table-container{
  margin-top: 20px;

  .select-box {
    display: flex;

    .select-row{
      margin-right: 20px;

      .text{
        font-size: 14px;
        color: #333333;
        margin-right: 6px;
      }

      .form-width{
        width: 180px;
      }

      &:nth-child(3) .form-width{
        width: 250px;
      }
    }
  }
}

.el-table--border >>> .el-table__row td:nth-child(3) .cell {
  line-height: normal;
}

.el-date-editor >>> .el-range-separator {
  padding: 0;
  width: auto;
}
</style>
